<!-- src/views/post/PostList.vue -->
<template>
  <a-card class="post-container">
    <div class="header">
      <a-space>
        <a-button type="primary" @click="handleCreate">新建帖子</a-button>
      </a-space>
    </div>

    <a-table
      :columns="columns"
      :data="data"
      :pagination="pagination"
      @page-change="handlePageChange"
      row-key="id"
    >
      <template #tags="{ record }">
        <a-tag v-for="tag in record.tags" :key="tag" color="blue"
          >{{ tag }}
        </a-tag>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button type="text" @click="handleView(record.id)">查看</a-button>
          <a-button type="text" @click="handleEdit(record.id)">编辑</a-button>
          <a-popconfirm
            content="确定要删除这个帖子吗？"
            @ok="handleDelete(record.id)"
          >
            <a-button type="text" status="danger">删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
  </a-card>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import { Message } from "@arco-design/web-vue";
import { PostControllerService } from "../../../generated";

const router = useRouter();

// 表格列配置
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    width: 100,
  },
  {
    title: "标题",
    dataIndex: "title",
  },
  {
    title: "标签",
    slotName: "tags",
  },
  {
    title: "点赞数",
    dataIndex: "thumbNum",
    width: 100,
  },
  {
    title: "收藏数",
    dataIndex: "favourNum",
    width: 100,
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    width: 180,
  },
  {
    title: "操作",
    slotName: "action",
    width: 200,
  },
];

// 数据
const data = ref([]);
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
});
const searchText = ref("");

// 加载数据
const loadData = async () => {
  try {
    const res = await PostControllerService.listPostVoByPageUsingPost({
      current: pagination.value.current,
      pageSize: pagination.value.pageSize,
      searchText: searchText.value,
    });
    if (res.code === 0) {
      data.value = res.data.records.map((item) => ({
        ...item,
        tags: item.tagList || [], // 关键修改：使用 tagList
      }));
      pagination.value.total = Number(res.data.total); // 修复类型警告
      console.log("处理后的数据:", data.value); // 调试用
    }
  } catch (e) {
    Message.error("加载帖子列表失败");
  }
};
// 分页变化
const handlePageChange = (page) => {
  pagination.value.current = page;
  loadData();
};

// 搜索
const handleSearch = () => {
  pagination.value.current = 1;
  loadData();
};

// 创建帖子
const handleCreate = () => {
  router.push("/post/create");
};

// 查看帖子
const handleView = (id) => {
  router.push(`/post/detail/${id}`);
};

// 编辑帖子
const handleEdit = (id) => {
  router.push(`/post/edit/${id}`);
};

// 删除帖子
const handleDelete = async (id) => {
  try {
    const res = await PostControllerService.deletePostUsingPost({ id });
    if (res.code === 0) {
      Message.success("删除成功");
      nextTick(() => loadData());
    }
  } catch (e) {
    Message.error("删除失败");
  }
};

onMounted(() => {
  loadData();
});
</script>

<style scoped>
.post-container {
  min-height: 300px; /* 防止高度突变 */
  overflow: hidden; /* 可选：抑制滚动条变化 */
  margin: 20px;
}

.header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
</style>
